<template>
  <div class="aboutus-container">
    <!-- 轮播图 -->
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide one"></div>
        <div class="swiper-slide two"></div>
        <div class="swiper-slide three"></div>
        <div class="swiper-slide four"></div>
        <div class="swiper-slide five"></div>
        <div class="swiper-slide six"></div>
        <div class="swiper-slide seven"></div>
        <div class="swiper-slide eight"></div>
        <div class="swiper-slide night"></div>
        <div class="swiper-slide ten"></div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
    <!-- 详情 -->
    <div class="show">
      <!-- 图片介绍 -->
      <div class="search">
        <div class="imgshow">
          <!-- 文字介绍 -->
          <div class="about">
            <h1 class="about-us">
              <i class="el-icon-s-promotion"></i>
              关于我们
            </h1>
            <div class="word-detail">
              <el-card shadow="always">
                <h3 class="title">集团实行</h3>
                <p>
                  三平会领导下的总裁负质制，系承-国结、杳进求实、开拓的企业精伸，奉行-与时俱进，长支久孟
                  的企业家台，查衙-以人为本，各元共云 的企业理念，实施!
                  百年安無-的企业原景，并确立了企业的目标和价估观;建立了科学的含理休系;香造了和站向上的经音（工作)氛国;培
                  秀了一支德才苏备、只有市场竞争力的员工队伍：打造和树立了“交雷品牌-和
                  安盈风格。策团十分注中发挥光组织在企业中的积极作用。
                  视企业文化和"再就业工程”，热心社会公益手业和幾苦手业，
                </p>
              </el-card>
              <el-card shadow="always">
                <h3 class="title">集团实行</h3>
                <p>
                  三平会领导下的总裁负质制，系承-国结、杳进求实、开拓的企业精伸，奉行-与时俱进，长支久孟
                  的企业家台，查衙-以人为本，各元共云 的企业理念，实施!
                  百年安無-的企业原景，并确立了企业的目标和价估观;建立了科学的含理休系;香造了和站向上的经音（工作)氛国;培
                  秀了一支德才苏备、只有市场竞争力的员工队伍：打造和树立了“交雷品牌-和
                  安盈风格。策团十分注中发挥光组织在企业中的积极作用。
                  视企业文化和"再就业工程”，热心社会公益手业和幾苦手业，
                </p>
              </el-card>
              <el-card shadow="always">
                <h3 class="title">集团实行</h3>
                <p>
                  三平会领导下的总裁负质制，系承-国结、杳进求实、开拓的企业精伸，奉行-与时俱进，长支久孟
                  的企业家台，查衙-以人为本，各元共云 的企业理念，实施!
                  百年安無-的企业原景，并确立了企业的目标和价估观;建立了科学的含理休系;香造了和站向上的经音（工作)氛国;培
                  秀了一支德才苏备、只有市场竞争力的员工队伍：打造和树立了“交雷品牌-和
                  安盈风格。策团十分注中发挥光组织在企业中的积极作用。
                  视企业文化和"再就业工程”，热心社会公益手业和幾苦手业，
                </p>
              </el-card>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper'
export default {
  name: 'ProjectFrontIndex',

  data () {
    return {}
  },

  mounted () {
    const swiper = new Swiper('.swiper-container', {
      pagination: '.swiper-pagination',
      effect: 'coverflow',
      grabCursor: true,
      // centeredSlides: true,
      slidesPerView: 'auto',
      // slidesPerView: 5,
      coverflow: {
        rotate: 50,
        stretch: 0,
        depth: 100,
        modifier: 1,
        slideShadows: true
      }
    })
    console.log(swiper)
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.aboutus-container {
  background-size: 100% 100%;
  background-image: url("@/assets/slide/2.jpg");
  background-repeat: no-repeat;
  height: 80vw;
  .show {
    position: absolute;
    width: 100%;
    .search {
      position: relative;
      margin: 0 auto;
      width: 1280px;
      border-radius: 20px;
      // background: rgba(87, 67, 67, 0.4);
      background: rgba(217, 233, 238, 0.3);
      .imgshow {
        overflow: hidden;
        margin-top: 50px;
        color:#ffffff;
        .about {

          margin-top: 70px;
          font-size: 16px;
          .about-us {
            text-align: center;
            font-weight: 700;
          }
        }
      }
          .title{
              font-weight: bolder;
          }
        .el-card{
          width: 70%;
          margin: 80px auto;
      border-radius: 20px;

      }
    }
  }
}
.swiper-container {
  width: 100%;
  padding-top: 50px;
  padding-bottom: 50px;
}
.swiper-slide {
  background-position: center;
  background-size: cover;
  width: 300px;
  height: 300px;
  &.one {
    background-image: url("~@/assets/slide/1.jpg");
  }
  &.two {
    background-image: url("~@/assets/slide/2.jpg");
  }
  &.three {
    background-image: url("~@/assets/slide/3.jpg");
  }
  &.four {
    background-image: url("~@/assets/slide/4.jpg");
  }
  &.five {
    background-image: url("~@/assets/slide/5.jpg");
  }
  &.six {
    background-image: url("~@/assets/slide/6.jpg");
  }
  &.seven {
    background-image: url("~@/assets/slide/7.jpg");
  }
  &.eight {
    background-image: url("~@/assets/slide/8.jpg");
  }
  &.night {
    background-image: url("~@/assets/slide/9.jpg");
  }
  &.ten {
    background-image: url("~@/assets/slide/10.jpg");
  }
}
</style>
